<template>
  <div class="app-container">

    <el-form :model="form" ref="form" label-width="160px" v-loading="formLoading"  :inline="true">
        <el-form-item label="试卷类型：" prop="paperType">
          <el-select
            v-model="data.paperType"
            placeholder="请选择"
            filterable
            clearable
            @change="typeChange"
          >
            <el-option
              v-for="item in this.typeEnum"
              :key="item.key"
              :value="item.key"
              :label="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试卷名称：" prop="name">
          <!--filterable添加搜索功能-->
          <el-select
            v-model="data.pageId"
            placeholder="请选择"
            clearable
            :remote-method="getpaperName"
            @change="pagerChange"
          >
            <el-option
              v-for="item in paperNameList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="addItem" type="text" icon="el-icon-plus">添加</el-button>
        </el-form-item>
     
      <div style="margin-left:120px;margin-bottom:20px">
        <el-table :data="examPageList" style="width:700px" border>
          <el-table-column
            prop="paperType"
            label="类型"
            width="120"
            align="center"
            :formatter="typeFormatter"
          ></el-table-column>
          <el-table-column prop="name" label="试卷名称" align="center"></el-table-column>
          <el-table-column width="120" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="delItem(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm" style="margin-left:727px">保存</el-button>
        <!-- <el-button @click="resetForm">重置</el-button> -->
      </el-form-item>
    </el-form>
    
      
  </div>
</template>

<script>
import { allCategory,selectCategory,getCategoryPageList,createCategory,deleteCategory} from "@/api/category/category";
import { changeStatus,getVPager,bindPaper,createCourse,form,getPager} from "@/api/xzs/course";
import { getsubCoursePageList,ppageList} from "@/api/xzs/examPaper";
import Editor from '@/components/Editor';
export default {
  inject:['reload'],
   components: {
    Editor
  },
  data() {
    return {
      form: {
        id: null
      },
      data: {
        paperType: "",
        pageId: ""
      },
      typeEnum:[{ key: 1, value: '正式考试' }, { key: 0, value: '课堂互动' }],
      paperNameList: [],
      examPageList: [],
      selType: null,
      selExamPage: null,
      formLoading: false
    }
  },
  created() {
   this.form.id = this.$route.query.id;
    let id = this.form.id;

    //this.getpaperName();
    if (id && parseInt(id) !== 0) {
      this.formLoading = true;
      getPager(id).then(re => {
        this.examPageList = re.response;
        this.formLoading = false;
      });
    }
  },
  methods: {
    //类型更改
    typeChange(id) {
      this.typeEnum.map(item => {
        if (item.key == id) {
          this.selType = item;
        }
      });
      this.data.pageId = "";
      this.getpaperName();
      this.selExamPage = null;
    },
    //表格数据参数格式化
    typeFormatter(row, column, cellValue) {
      let str = "";
      this.typeEnum.map(item => {
        if (item.key == cellValue) {
          str = item.value;
        }
      });
      return str;
    },
    //课程修改
    pagerChange(id) {
      this.paperNameList.map(item => {
        if (item.id == id) {
          this.selExamPage = item;
          return;
        }
      });
    },
    submitForm() {
      let data = {
        id: this.form.id,
        examPaperList: []
      };
      this.examPageList.map(item => {
        data.examPaperList.push(item.id);
      });
      bindPaper(data)
        .then(data => {
          if (data.code === 1) {
            this.$message.success(data.message);
              this.$router.push("/courses/courseli/index");
            
          } else {
            this.$message.error(data.message);
            this.formLoading = false;
          }
        })
        .catch(e => {
          this.formLoading = false;
        });
    },
    //课程列表
    getpaperName(query) {
      this.formLoading = true;
      ppageList({
          condition: query,
          paperType: this.data.paperType,
          pageIndex: 1,
          pageSize: 100
        })
        .then(res => {
          this.formLoading = false;
          if (res.code == 1) {
            this.paperNameList = res.response.list;
          }
        })
        .catch(res => {
          this.formLoading = false;
        });
    },
    //添加新记录
    addItem() {
      if (!this.selType || !this.selExamPage) {
        this.$message({
          showClose: true,
          message: "请先选择试卷类型和试卷"
        });
      } else {
        this.examPageList.push({
          paperType: this.selType.key,
          name: this.selExamPage.name,
          id: this.selExamPage.id
        });
      }
    },
    //删除记录
    delItem(row) {
      let index = this.examPageList.findIndex(item => {
        return item.id == row.id;
      });
      this.examPageList.splice(index, 1);
    },
    resetForm () {
      this.reload()
    }
  }
};
</script>